<!DOCTYPE HTML>
<html>
<title>样式操作</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
  .high
  { font-weight:bold;
    color:red;
    background-color:skyblue;
  }
  .another{ font-style:italic;
            color:blue;}
   .myClass
   {
       background-color:Gray;
    }
</style>
    <script src="jquery-1.8.0.js"type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //获取样式
        $("input:eq(0)").click(function () {
            alert($("p").attr("class"));//获取样式，进行输出显示
        });
        //设置样式
        $("input:eq(1)").click(function () {
            $("p").attr("class", "high");//为class属性指定样式的名称  把默认的样式覆盖
        });
        //追加样式
        $("input:eq(2)").click(function () {
            $("p").addClass("another"); //追加的样式与原一的样式进行叠加
        });
        //删除全部样式
        $("input:eq(3)").click(function () {
            $("p").removeClass();//全部样式都删除掉
        });
        //删除指定样式
        $("input:eq(4)").click(function () {
            $("p").removeClass("high"); //删除指定样式
        });
        //重复切换样式toggleClass
        $("input:eq(5)").click(function () {
            $("p").toggleClass("another"); //与设置上一种样式进行重复切换的效果
        });
        //判断元素是否含有某样式:返回布尔型的值
        $("input:eq(6)").click(function () {
            alert($("p").hasClass("another"));
            //alert($("p").is(".another"));//与hasClass功能一样，只是语法不同
        });
    });
</script>
</head>

<body>
 	<input type="button" value="输出class类"/>
	<input type="button" value="设置class类"/>
	<input type="button" value="追加class类"/>
	<input type="button" value="删除全部class类"/>
	<input type="button" value="删除指定class类"/>
	<input type="button" value="重复切换class类"/>
	<input type="button" value="判断元素是否含有某个class类"/>
 
	<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>

</body>
</html>